<template>
  <h2>我是A组件文件</h2>
  <div ref="div">{{ str1 }}</div>
  <div ref="div">{{ str2 }}</div>
  <button @click="edit">修改str</button>
</template>

<script setup lang="ts">
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onRenderTracked, onRenderTriggered } from "vue"

const str1 = ref<string>("我是A组件str1文字")
const str2 = ref<string>("我是A组件str2文字")
const div = ref<HTMLDivElement>()     // 多个相同ref 只获取最后一个的值

const edit = () => {
  str1.value = "str1的值被修改啦"
  str2.value = "str2的值也被修改啦"
}

// beforeCreate created setup语法糖模式是没有这两个生命周期属性 直接就是setup
console.log("setup")

// 创建
// onBeforeMount读不到dom onMounted可以读取dom
onBeforeMount(() => {
  console.log("创建之前：onBeforeMount", div.value, div)
})
onMounted(() => {
  console.log("创建完成：onMounted", div.value, div)
})

// 更新
// onBeforeUpdate 获取更新之前的dom onUpdated 获取更新之后的dom
onBeforeUpdate(() => {
  console.log("更新之前：onBeforeUpdate", div.value?.innerText)
})
onUpdated(() => {
  console.log("更新完成：onUpdated", div.value?.innerText)
})

// 销毁
onBeforeUnmount(() => {
  console.log("销毁之前：onBeforeUnmount")
})
onUnmounted(() => {
  console.log("销毁完成：onUnmounted")
})

// 渲染 主要用于调试跟踪
onRenderTracked((e) => {
  console.log("onRenderTracked", e)
})
// 触发 主要用于调试跟踪
onRenderTriggered((e) => {
  console.log("onRenderTriggered", e)
})
</script>